<!DOCTYPE html>
<html class="x-admin-sm" style="overflow-y: hidden">
<head>
    <th:block th:insert="head/head :: common_head"></th:block>
    <link rel="stylesheet" th:href="@{/ztree/css/metroStyle/metroStyle.css}">
    <script type="text/javascript" th:src="@{/jsfiles/xm-select.js?t=20813}" charset="utf-8"></script>

    <!-- 高德地图安全密钥配置 -->
    <script>
        window._AMapSecurityConfig = {
            securityJsCode: '7a0a36e28a5c103529a98091864e6c53',
        };
    </script>

    <!-- 高德地图API -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=6f2409fb651e7a7831482d0df918e001"></script>

    <style>
        :root {
            --bg-color: #f8f9fa;
            --text-color: #333;
            --panel-bg: #fff;
            --highlight-blue: #0066CC;
            --border-color: #e5e6eb;
            --btn-danger: #FF3333;
        }
        /* 勾选节点的名称标签样式 */
        .checked-outlet-label {
            background-color: rgba(255, 153, 0, 0.8); /* 橙色背景 */
            color: white;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 12px;
            white-space: nowrap;
            pointer-events: none !important; /* 禁止点击穿透 */
        }
        /* 点击网点的名称标签样式（绿色背景） */
        .outlet-selected-label {
            background-color: rgba(0, 153, 102, 0.8);
            color: white;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 12px;
            white-space: nowrap;
            pointer-events: none !important;
        }
        body {
            background-color: var(--bg-color);
            margin: 0;
            padding: 10px;
        }

        .layui-col-space15 {
            margin: 0 -7.5px;
        }
        .layui-col-space15 > [class*="layui-col-"] {
            padding: 0 7.5px;
        }

        .left-panel {
            background: var(--panel-bg);
            height: calc(100vh - 40px);
            border-radius: 8px;
            padding: 20px;
            color: var(--text-color);
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow-y: auto;
            box-sizing: border-box;
        }

        .tree-title {
            font-size: 16px;
            font-weight: bold;
            color: var(--text-color);
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid #e6e6e6;
        }

        .map-panel {
            height: calc(100vh - 40px);
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            box-sizing: border-box;
        }
        #mapContainer { width: 100%; height: 100%; }

        /* 右侧面板修改：内容往上靠，不垂直居中 */
        .right-panel {
            background: var(--panel-bg);
            height: calc(100vh - 40px);
            border-radius: 8px;
            padding: 20px;
            color: var(--text-color);
            overflow-y: auto;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            box-sizing: border-box;
            /* 去掉垂直居中，改为默认布局 */
            display: block;
        }

        /* 信息卡片宽度统一 */
        .detail-card, .search-controls, .search-result-panel {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .detail-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            overflow: hidden;
            margin-bottom: 16px;
            border: 1px solid #f0f0f0;
            /* 流式布局，折叠后高度自适应 */
            height: auto;
            transition: all 0.3s ease;
        }

        .detail-title {
            font-size: 18px;
            font-weight: 600;
            padding: 16px 20px;
            margin: 0;
            background: var(--highlight-blue);
            color: white;
            border-bottom: 1px solid var(--border-color);
            position: relative;
            cursor: pointer;
        }

        /* 折叠按钮样式 */
        .toggle-btn {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 20px;
            line-height: 1;
            transition: transform 0.3s ease;
        }

        .detail-content {
            padding: 20px;
            transition: all 0.3s ease;
            max-height: 2000px;
            overflow: hidden;
        }

        .detail-content.collapsed {
            padding: 0;
            max-height: 0;
            overflow: hidden;
        }

        .detail-item {
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px dashed var(--border-color);
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
        }

        .detail-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .detail-label {
            font-weight: 600;
            color: var(--highlight-blue);
            width: 80px;
            flex-shrink: 0;
            line-height: 1.6;
        }

        .detail-value {
            flex-grow: 1;
            line-height: 1.6;
            color: #555;
        }

        /* 只有在没有选择时才居中显示 */
        .no-selection {
            display: flex;
            height: 100%;
            align-items: center;
            justify-content: center;
            color: #999;
            flex-direction: column;
            text-align: center;
            padding: 20px;
            min-height: 200px;
        }

        .no-selection i {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.5;
        }

        .operation-btn {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
            text-align: left;
            display: flex;
            gap: 10px;
        }

        .layui-btn-theme {
            background-color: var(--highlight-blue);
            border-color: var(--highlight-blue);
            transition: all 0.3s ease;
        }

        .layui-btn-theme:hover {
            background-color: #0052a3;
            border-color: #0052a3;
        }

        /* 搜索控制区样式 */
        .search-controls {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            padding: 18px;
            margin-bottom: 16px;
            border: 1px solid #f0f0f0;
        }

        .search-input-group {
            display: flex;
            margin-bottom: 12px;
        }

        .search-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            outline: none;
            font-size: 14px;
        }

        .search-input:focus {
            border-color: var(--highlight-blue);
        }

        .search-btn {
            background-color: var(--highlight-blue);
            color: white;
            border: none;
            padding: 0 15px;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .search-btn:hover {
            background-color: #0052a3;
        }

        .search-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
            align-items: center;
        }

        .radius-option {
            padding: 4px 10px;
            border: 1px solid #ddd;
            border-radius: 12px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .radius-option:hover {
            border-color: var(--highlight-blue);
        }

        .radius-option.active {
            background-color: var(--highlight-blue);
            color: white;
            border-color: var(--highlight-blue);
        }

        .category-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }

        .category-tag {
            padding: 3px 8px;
            background-color: #f0f2f5;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .category-tag:hover {
            background-color: #e1e4e8;
        }

        .category-tag.active {
            background-color: var(--highlight-blue);
            color: white;
        }

        /* 搜索结果面板 */
        .search-result-panel {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            border: 1px solid #f0f0f0;
            max-height: 300px;
            overflow-y: auto;
            margin-bottom: 16px; /* 和其他卡片保持一致间距 */
        }

        /* 搜索结果头部样式修改 */
        .result-header {
            font-weight: 600;
            padding: 16px 20px;
            margin: 0;
            background: var(--highlight-blue);
            color: white;
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 10;
            box-sizing: border-box;
            width: 100%;
        }

        .result-content {
            padding: 10px 20px;
        }

        .result-item {
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .result-item:hover {
            background-color: #f5f7fa;
        }

        .result-item:last-child {
            border-bottom: none;
        }

        .result-title {
            font-weight: 500;
            margin-bottom: 4px;
        }

        .result-address {
            font-size: 12px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .search-status {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255,255,255,0.9);
            padding: 10px 15px;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 90;
            display: none;
        }

        .map-loading {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.5);
            color: white;
            z-index: 100;
            font-size: 18px;
        }

        .map-error {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.7);
            color: white;
            z-index: 100;
            font-size: 18px;
            flex-direction: column;
        }

        .map-error button {
            margin-top: 15px;
            padding: 8px 20px;
            background: #FF3333;
            border: none;
            color: white;
            border-radius: 4px;
            cursor: pointer;
        }

        .boundary-link {
            color: var(--highlight-blue);
            text-decoration: underline;
            cursor: pointer;
        }

        .boundary-error {
            color: var(--btn-danger);
            padding: 10px;
            background-color: #fff5f5;
            border-radius: 4px;
            margin-top: 10px;
            font-size: 14px;
        }

        .boundary-success {
            color: #009966;
            padding: 10px;
            background-color: #f0fff5;
            border-radius: 4px;
            margin-top: 10px;
            font-size: 14px;
        }

        .district-label {
            background-color: rgba(0, 102, 204, 0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            white-space: nowrap;
            pointer-events: none !important; /* CSS层面禁止事件捕获 */
        }

        /* 地图控制按钮样式 */
        .map-controls {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 80;
            display: flex;
            gap: 10px;
        }

        /* 自定义标记列表样式 */
        .custom-marker-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px dashed #eee;
        }

        .custom-marker-item:last-child {
            border-bottom: none;
        }

        /* 确保地图容器能接收所有鼠标事件 */
        #mapContainer canvas {
            pointer-events: auto !important;
        }

        /* 多边形样式强制穿透 */
        .amap-polygon {
            pointer-events: none !important;
        }

        /* 修复layer弹窗z-index问题 */
        .layui-layer {
            z-index: 99999 !important;
        }
        .layui-layer-shade {
            z-index: 99998 !important;
        }

        /* 标记名称输入框样式 */
        .marker-name-input {
            width: 240px;
            padding: 8px 12px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            outline: none;
        }
        .marker-name-input:focus {
            border-color: var(--highlight-blue);
        }

        /* 标记操作按钮组 */
        .marker-actions {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!-- 左侧树形结构 -->
        <div class="layui-col-md3">
            <div class="left-panel">
                <div class="tree-title">网点/区域列表</div>
                <ul id="list_ztree" class="ztree"></ul>
            </div>
        </div>

        <!-- 中间地图 -->
        <div class="layui-col-md6">
            <div class="map-panel">
                <!-- 地图控制按钮 -->
                <div class="map-controls">
                    <button id="toggleAddMarkerBtn" class="layui-btn layui-btn-sm layui-btn-normal" onclick="toggleAddMarkerMode()">
                        <i class="layui-icon layui-icon-add-circle"></i> 开启添加标记
                    </button>
                </div>

                <div class="map-loading">
                    <i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i>
                    地图加载中...
                </div>
                <div class="map-error">
                    <p>地图加载失败，请检查网络连接或API配置</p>
                    <p id="errorMessage" style="margin: 10px 0; font-size: 14px;"></p>
                    <button onclick="retryLoadMap()">重试加载</button>
                </div>
                <div class="search-status" id="searchStatus">
                    <i class="layui-icon layui-icon-loading"></i> 正在搜索...
                </div>
                <div id="mapContainer"></div>
            </div>
        </div>

        <!-- 右侧详情面板 -->
        <div class="layui-col-md3">
            <div class="right-panel">
                <div id="detailContent" class="no-selection">
                    <i class="layui-icon layui-icon-map"></i>
                    <p>请从左侧选择节点查看详情</p>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:insert="head/head :: common_jsfiles"></th:block>
<script type="text/javascript" th:src="@{/ztree/js/jquery.ztree.core.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/ztree/js/jquery.ztree.excheck.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/ztree/js/jquery.ztree.exhide.js}" charset="utf-8"></script>
<script>
    var map;
    var mapLoaded = false;
    var placeSearch; // PlaceSearch实例
    var currentMarker = null;       // 当前选中的网点标记
    var districtPolygon = null;     // 区域边界多边形
    var districtLabel = null;       // 区域名称标签
    var currentNode = null;         // 当前选中节点
    var boundaryData = null;        // 边界数据缓存
    var url = "[[${serverUrl}]]/";
    var zTree;
    var currentRadius = 500;        // 默认搜索半径500米
    var currentLngLat = null;       // 当前搜索中心点
    var poiMarkers = [];            // 存储周边POI标记
    var currentSearchMarkers = [];  // 存储当前搜索结果标记
    var prevNodeIsArea = false;     // 记录上一个节点是否是区域
    var isAddMarkerMode = false;    // 是否开启添加标记模式
    var customMarkers = [];         // 存储自定义添加的标记
    var tempMarker = null;          // 临时预览标记
    var isConfirming = false;       // 标记是否正在确认弹窗中
    var layerindex = null;          // 弹出层
    var zbflList = null;            //周边分类
    var checkedOutletMarkers = {};  // 存储勾选的网点标记(key:节点ID, value:{marker, label, infoWindow})
    var currentOutletLabel = null; // 存储当前选中网点的名称标签

    // zTree配置
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: null
            }
        },
        view: {
            fontCss: {color: "#676767"}
        },
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: {"Y": "s", "N": "s"}
        },
        callback: {
            beforeClick: function(treeId, treeNode) {
                currentNode = treeNode;
                handleNodeSelection(treeNode);
                return true;
            },
            beforeCheck: function(treeId, treeNode) {
                // 勾选状态变更前的预处理
                return true;
            },
            onCheck: function(event, treeId, treeNode) {
                // 延迟执行，确保zTree内部状态同步完成
                setTimeout(() => {
                    handleNodeCheck(treeNode);
                }, 0);
            }
        }
    };

    // 页面初始化
    $(function() {
        initOutletsData();

        // 初始化时就绑定DOM级别的点击事件（备用方案）
        document.getElementById('mapContainer').addEventListener('click', handleDomMapClick, true);
        console.log('[初始化] DOM点击事件已绑定到地图容器');
    });

    // 初始化树形数据和其他数据
    function initOutletsData() {
        var jsonData = {timestamp: new Date().getTime()};
        var sendStr = {
            data: encrypt_str(JSON.stringify(jsonData), localStorage.getItem("a"), localStorage.getItem("b"))
        };
        post_json_form(url + "zhdt/main/init_wdbz", JSON.stringify(sendStr), "加载中...", renderTree);
    }

    // 渲染树形结构
    function renderTree(data) {
        $.fn.zTree.init($("#list_ztree"), setting, data.treejson);
        zTree = $.fn.zTree.getZTreeObj("list_ztree");

        //保存自定义分类
        zbflList = data.zhdtZbflList;


        // ========== 新增：默认展开到第三层 ==========
        // zTree节点level从0开始计数（根节点level=0，第一层level=1，第二层level=2）
        function expandToThirdLevel(treeObj) {
            // 1. 展开根节点（level=0，第一层）
            var rootNodes = treeObj.getNodesByParam("level", 0);
            $.each(rootNodes, function(i, rootNode) {
                treeObj.expandNode(rootNode, true, false, false); // 展开根节点，不递归子节点

                // 2. 展开第二层节点（level=1）
                var level1Nodes = treeObj.getNodesByParam("level", 1);
                $.each(level1Nodes, function(j, level1Node) {
                    treeObj.expandNode(level1Node, true, false, false); // 展开第二层，不递归子节点

                    // // 3. 展开第三层节点（level=2）
                    // var level2Nodes = treeObj.getNodesByParam("level", 2);
                    // $.each(level2Nodes, function(k, level2Node) {
                    //     treeObj.expandNode(level2Node, true, false, false); // 展开第三层
                    // });
                });
            });
        }
        // 执行展开逻辑
        expandToThirdLevel(zTree);

        // ========== 新增：控制第3、4层才显示checkbox ==========
        function setNodeCheckboxVisibility(treeObj) {
            // 获取所有节点（转为数组遍历）
            var allNodes = treeObj.transformToArray(treeObj.getNodes());
            $.each(allNodes, function(i, node) {
                // level=2（第3层）、level=3（第4层）显示checkbox，其余隐藏
                if (node.level === 2 || node.level === 3) {
                    node.nocheck = false; // 显示checkbox
                } else {
                    node.nocheck = true;  // 隐藏checkbox
                }
                treeObj.updateNode(node); // 更新节点UI
            });
        }

        setNodeCheckboxVisibility(zTree);

        console.info("zbflList:"+JSON.stringify(zbflList));

        initMap();
    }

    // 处理节点选择（核心：只判断sfqu=="1"，其余都是网点）
    function handleNodeSelection(node) {
        console.log('[节点选择] 当前节点:', node.name, '是否区域:', node.sfqu === "1");

        // 判断当前节点是否是区域
        const currentNodeIsArea = (node.sfqu === "1");

        // 清除逻辑：
        // 1. 当前是区域节点 → 清除所有元素（包括边界）
        // 2. 当前是网点节点 → 只清除网点标记和搜索结果，保留边界
        if (currentNodeIsArea) {
            clearMapElements(true); // 清除边界
            prevNodeIsArea = true;
        } else {
            clearMapElements(false); // 保留边界
            prevNodeIsArea = false;
        }

        // 严格按要求处理节点
        if (node.sfqu === "1") {
            showAreaDetail(node);
            loadAndDrawBoundary(node);
            currentLngLat = null;
        } else {
            showOutletDetail(node);
            showOutletOnMap(node);
            if (node.wdjd && node.wdwd) {
                currentLngLat = [parseFloat(node.wdjd), parseFloat(node.wdwd)];
            } else {
                currentLngLat = null;
            }
        }
    }

    // 初始化地图
    function initMap() {
        document.querySelector('.map-loading').style.display = 'flex';
        console.log('[地图初始化] 开始加载高德地图');

        if (typeof AMap === 'undefined') {
            showMapError('高德地图API加载失败');
            return;
        }

        try {
            map = new AMap.Map('mapContainer', {
                center: [114.30, 30.60], // 武汉
                zoom: 12,
                viewMode: '3D',
                mapStyle: 'amap://styles/normal'
                // 移除了 defaultCursor: 'crosshair'，使用默认鼠标样式
            });

            // 地图加载完成
            map.on('complete', function() {
                console.log('[地图初始化] 地图加载完成');
                // 加载所有需要的插件
                AMap.plugin(['AMap.PlaceSearch', 'AMap.Marker', 'AMap.Polygon', 'AMap.Text',
                    'AMap.InfoWindow', 'AMap.Icon', 'AMap.Circle', 'AMap.Calculator'], function() {
                    // 初始化PlaceSearch
                    placeSearch = new AMap.PlaceSearch({
                        pageSize: 20,
                        pageIndex: 1,
                        map: map,
                        extensions: 'all'
                    });
                    mapLoaded = true;
                    document.querySelector('.map-loading').style.display = 'none';

                    // 绑定地图原生事件（最高优先级）
                    map.on('click', handleMapClickForMarker);
                    console.log('[地图初始化] 地图事件已绑定');
                });
            });

            // 地图加载超时
            setTimeout(() => {
                if (!mapLoaded) showMapError('地图加载超时');
            }, 10000);

        } catch (error) {
            console.error('[地图初始化] 错误:', error);
            showMapError('地图初始化失败：' + error.message);
        }
    }

    // ========== 区域节点相关方法（简化版） ==========
    // 显示区域详情
    function showAreaDetail(node) {
        const detailEl = document.getElementById('detailContent');
        detailEl.innerHTML = `
                <div class="detail-card">
                    <h3 class="detail-title" onclick="toggleCard(this)">${node.name}（区域）
                        <span class="toggle-btn">-</span>
                    </h3>
                    <div class="detail-content">
                        <div class="detail-item">
                            <span class="detail-label">区域ID：</span>
                            <span class="detail-value">${node.id}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">边界文件：</span>
                            <span class="detail-value">
                                <a href="${url}sys/file/download_json?fileId=${node.id}&token=${localStorage.getItem("token")}&isDownload=0"
                                   class="boundary-link" target="_blank">${node.wglj || '未上传'}</a>
                            </span>
                        </div>
                        <div id="boundaryStatus">加载边界数据中...</div>
                        <div class="operation-btn">
                            <button class="layui-btn layui-btn-theme" id="toggleBoundaryBtn" onclick="toggleBoundary()">隐藏边界</button>
                            <button class="layui-btn layui-btn-primary" onclick="updateBoundary()">更新边界</button>
                        </div>
                    </div>
                </div>
                ${customMarkers.length > 0 ? getCustomMarkersHtml() : ''}
            `;
    }

    // 加载并绘制区域边界
    function loadAndDrawBoundary(node) {
        if (!mapLoaded) return;

        const statusEl = document.getElementById('boundaryStatus');
        statusEl.textContent = '正在加载边界数据...';
        console.log('[边界加载] 开始加载区域', node.name, '的边界数据');

        // 请求边界数据
        fetch(`${url}sys/file/download_json?fileId=${node.id}&token=${localStorage.getItem("token")}&isDownload=0`)
            .then(res => {
                if (!res.ok) throw new Error('边界文件不存在');
                return res.json();
            })
            .then(data => {
                console.log('[边界加载] 边界数据加载成功:', data);
                if (data && data.districts && data.districts[0] && data.districts[0].polyline) {
                    boundaryData = data;
                    drawBoundary(data.districts[0]);
                    statusEl.className = 'boundary-success';
                    statusEl.textContent = '✅ 边界数据加载成功';
                    document.getElementById('toggleBoundaryBtn').textContent = '隐藏边界';
                } else {
                    throw new Error('边界数据格式错误');
                }
            })
            .catch(error => {
                console.error('[边界加载] 错误:', error);
                boundaryData = null;
                statusEl.className = 'boundary-error';
                statusEl.textContent = '⚠️ 无边界数据，请点击"更新边界"';
                document.getElementById('toggleBoundaryBtn').textContent = '显示边界';
            });
    }

    // 绘制边界（完整显示所有多环-主区域+飞地，无重叠，和高德完整显示一致）
    function drawBoundary(district) {
        console.log('[边界绘制] 开始绘制边界，district:', district);

        // 清除原有边界（逻辑不变）
        if (districtPolygon) {
            console.log('[边界绘制] 清除原有边界');
            // 若之前是多环，先移除所有多边形（这里修改为数组存储多环）
            if (Array.isArray(districtPolygon)) {
                map.remove(districtPolygon);
            } else {
                map.remove(districtPolygon);
            }
        }
        if (districtLabel) {
            map.remove(districtLabel);
            districtLabel = null;
        }

        // 关键修改：按|分割多环，每个环单独绘制独立多边形
        const rings = district.polyline.split('|'); // 分割所有环
        console.log('[边界绘制] 检测到', rings.length, '个环');
        const polygons = []; // 存储所有环的多边形（数组形式）

        // 遍历每个环，创建独立多边形
        rings.forEach((ring, index) => {
            if (!ring) {
                console.log('[边界绘制] 跳过空环', index);
                return; // 跳过空环（防止异常）
            }

            const points = ring.split(';').map(p => {
                const [lng, lat] = p.split(',').map(Number);
                // 过滤无效坐标（避免NaN导致的绘制异常）
                if (isNaN(lng) || isNaN(lat)) {
                    console.log('[边界绘制] 无效坐标:', p);
                    return null;
                }
                return new AMap.LngLat(lng, lat);
            }).filter(point => point !== null); // 移除无效点

            console.log('[边界绘制] 环', index, '有', points.length, '个有效坐标点');

            // 只有坐标点数量足够时才绘制（避免无效多边形）
            if (points.length >= 3) {
                const polygon = new AMap.Polygon({
                    path: points,
                    strokeColor: "#0066CC", // 统一边框颜色
                    strokeWeight: 3,       // 统一边框宽度
                    strokeOpacity: 0.8,    // 统一边框透明度
                    fillColor: "#0066CC",  // 统一填充颜色
                    fillOpacity: 0.1,      // 统一填充透明度（低透明度避免重叠视觉问题）
                    zIndex: 10,            // 统一层级
                    clickable: false,      // 不响应点击事件
                    bubble: true,          // 允许事件冒泡
                    cursor: 'default'      // 鼠标样式
                });

                polygon.setMap(map);
                polygons.push(polygon);
                console.log('[边界绘制] 环', index, '绘制完成');

                // 监听多边形事件用于调试
                polygon.on('click', function(e) {
                    console.log('[边界调试] 多边形被点击，这不应该发生！', e);
                });
            }
        });

        // 存储所有多边形（用于后续隐藏/显示）
        districtPolygon = polygons;
        console.log('[边界绘制] 总共绘制', polygons.length, '个多边形');

        // 创建区域名称标签
        const center = district.center.split(',').map(Number);
        districtLabel = new AMap.Text({
            text: district.name || currentNode.name,
            position: new AMap.LngLat(center[0], center[1]),
            offset: new AMap.Pixel(-30, 0),
            className: 'district-label',
            zIndex: 11,
            clickable: false,      // 不响应点击
            bubble: true           // 允许事件冒泡
        });
        districtLabel.setMap(map);
        console.log('[边界绘制] 区域标签已添加');

        // 调整地图视野（适配所有多边形）
        if (polygons.length > 0) {
            map.setFitView(polygons, false, [50, 50, 50, 50]);
            console.log('[边界绘制] 地图视野已调整');
        }

        // 强制设置所有多边形DOM元素的pointer-events为none
        setTimeout(() => {
            const polygonEls = document.querySelectorAll('.amap-polygon');
            polygonEls.forEach(el => {
                el.style.pointerEvents = 'none !important';
                el.style.zIndex = '10 !important';
            });
            console.log('[边界绘制] 已设置所有多边形DOM元素pointer-events为none，共', polygonEls.length, '个元素');
        }, 100);

        console.log('[边界绘制] 边界绘制完成，确保所有覆盖物都设置了事件穿透');
    }

    // 同步修改toggleBoundary函数（适配多环数组存储）
    function toggleBoundary() {
        const btn = document.getElementById('toggleBoundaryBtn');
        if (btn.textContent === '隐藏边界') {
            // 隐藏所有多边形
            if (Array.isArray(districtPolygon)) {
                districtPolygon.forEach(polygon => polygon.hide());
            } else if (districtPolygon) {
                districtPolygon.hide();
            }
            if (districtLabel) districtLabel.hide();
            btn.textContent = '显示边界';
        } else {
            // 显示边界
            if (Array.isArray(districtPolygon)) {
                districtPolygon.forEach(polygon => polygon.show());
            } else if (districtPolygon) {
                districtPolygon.show();
            }
            if (districtLabel) districtLabel.show();
            btn.textContent = '隐藏边界';
        }
    }

    // 更新边界
    function updateBoundary() {
        var jsonData = {"xzjg_id":currentNode.id, "timestamp": new Date().getTime()};
        var sendStr = {
            data: encrypt_str(JSON.stringify(jsonData), localStorage.getItem("a"), localStorage.getItem("b"))
        };
        post_json_form(url + "zhdt/main/save_qu", JSON.stringify(sendStr), "加载中...", updateBoundaryBack);
    }

    function updateBoundaryBack(data){
        console.log('[边界更新] 更新完成:', data);
        loadAndDrawBoundary(currentNode);
    }

    // ========== 网点节点相关方法（恢复完整搜索功能） ==========
    // 显示网点详情（含搜索控制区）
    function showOutletDetail(node) {
        const detailEl = document.getElementById('detailContent');

        // 构建自定义分类HTML
        let customCategoryHtml = '';
        if (zbflList && zbflList.length > 0) {
            customCategoryHtml = `
                <div style="margin-top: 8px;">
                    <span>自定义分类：</span>
                    <div class="category-tags" id="customCategoryTags">
                        ${zbflList.map(item => `
                            <div class="category-tag" data-id="${item.id}" onclick="customCategoryClick(${item.id})">${item.name}</div>
                        `).join('')}
                    </div>
                </div>
            `;
        }

        detailEl.innerHTML = `
                <!-- 网点详情卡片 -->
                <div class="detail-card">
                    <h3 class="detail-title" onclick="toggleCard(this)">${node.name}（网点）
                        <span class="toggle-btn">-</span>
                    </h3>
                    <div class="detail-content">
                        <div class="detail-item">
                            <span class="detail-label">地址：</span>
                            <span class="detail-value">${node.wddz || '未填写'}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">联系人：</span>
                            <span class="detail-value">${node.fzr || '未填写'}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">电话：</span>
                            <span class="detail-value">${node.wddh || '未填写'}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">坐标：</span>
                            <span class="detail-value">${node.wdjd && node.wdwd ? `${node.wdjd}, ${node.wdwd}` : '未设置'}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">营业时间：</span>
                            <span class="detail-value">${node.wdyysj || '未填写'}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">网点描述：</span>
                            <span class="detail-value">${node.wdms || '未填写'}</span>
                        </div>
                    </div>
                </div>

                <!-- 搜索控制区 -->
                <div class="search-controls">
                    <div class="search-input-group">
                        <input type="text" class="search-input" id="keywordInput" placeholder="输入关键词搜索周边...">
                        <button class="search-btn" id="searchBtn">搜索</button>
                    </div>
                    <div class="search-options">
                        <span>搜索范围：</span>
                        <div class="radius-option" data-radius="200">200米</div>
                        <div class="radius-option" data-radius="300">300米</div>
                        <div class="radius-option active" data-radius="500">500米</div>
                        <div class="radius-option" data-radius="1000">1公里</div>
                        <div class="radius-option" data-radius="2000">2公里</div>
                        <div class="radius-option" data-radius="3000">3公里</div>
                    </div>
                    <div>
                        <span>常用分类：</span>
                        <div class="category-tags">
                            <div class="category-tag" data-category="餐饮">餐饮</div>
                            <div class="category-tag" data-category="酒店">酒店</div>
                            <div class="category-tag" data-category="超市">超市</div>
                            <div class="category-tag" data-category="银行">银行</div>
                            <div class="category-tag" data-category="医院">医院</div>
                            <div class="category-tag" data-category="学校">学校</div>
                        </div>
                        ${customCategoryHtml}
                    </div>
                </div>

                <!-- 搜索结果面板 -->
                <div id="searchResultPanel" class="search-result-panel" style="display: none;">
                    <div class="result-header">搜索结果 <span id="resultCount">(0)</span></div>
                    <div class="result-content" id="resultsList"></div>
                </div>

                ${customMarkers.length > 0 ? getCustomMarkersHtml() : ''}
            `;

        // 绑定搜索事件
        bindSearchEvents();
    }

    // 自定义分类点击事件
    function customCategoryClick(id) {
        alert(`点击了自定义分类，ID：${id}`);
    }

    // 卡片折叠/展开切换
    function toggleCard(titleEl) {
        const content = titleEl.nextElementSibling;
        const toggleBtn = titleEl.querySelector('.toggle-btn');

        if (content.classList.contains('collapsed')) {
            content.classList.remove('collapsed');
            toggleBtn.textContent = '-';
            toggleBtn.style.transform = 'rotate(0deg)';
        } else {
            content.classList.add('collapsed');
            toggleBtn.textContent = '+';
            toggleBtn.style.transform = 'rotate(180deg)';
        }

        // 折叠后让下方元素自动上移（流式布局自然实现）
        // 滚动到卡片顶部，提升体验
        titleEl.scrollIntoView({behavior: 'smooth', block: 'start'});
    }

    // 在地图上标记网点
    function showOutletOnMap(node) {
        if (!mapLoaded || !node.wdjd || !node.wdwd) return;

        try {
            const lng = parseFloat(node.wdjd);
            const lat = parseFloat(node.wdwd);

            if (isNaN(lng) || isNaN(lat)) return;

            // 先清除之前的网点标记和标签（避免残留）
            if (currentMarker) {
                map.remove(currentMarker);
                // 同时清除关联的标签（如果存在）
                if (currentMarker.label) {
                    map.remove(currentMarker.label);
                }
                currentMarker = null;
            }

            // 创建网点标记（原逻辑保留，新增标签关联）
            currentMarker = new AMap.Marker({
                position: new AMap.LngLat(lng, lat),
                title: node.name,
                icon: new AMap.Icon({
                    size: new AMap.Size(32, 32),
                    image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                    imageSize: new AMap.Size(32, 32)
                }),
                anchor: 'bottom-center',
                zIndex: 20,
                clickable: true
            });

            // ========== 复用自定义标记的标签样式 ==========
            const outletLabel = new AMap.Text({
                text: node.name,
                position: new AMap.LngLat(lng, lat),
                offset: new AMap.Pixel(-(node.name.length * 4), 25), // 自适应文字长度
                // 完全复用自定义标记的标签样式（和添加标记的标签一模一样）
                style: {
                    backgroundColor: 'rgba(0, 102, 204, 0.8)', // 和自定义标记标签相同的蓝色背景
                    color: 'white',
                    padding: '3px 8px',
                    borderRadius: '3px',
                    fontSize: '12px',
                    whiteSpace: 'nowrap',
                    pointerEvents: 'none'
                },
                zIndex: 21, // 层级比标记高，确保不被遮挡
                clickable: false,
                bubble: true
            });

            // 把标签关联到标记上，方便后续清理
            currentMarker.label = outletLabel;

            // 同时添加标记和标签到地图
            currentMarker.setMap(map);
            outletLabel.setMap(map);

            // 信息窗口（原逻辑保留）
            const infoWindow = new AMap.InfoWindow({
                content: `<h3>${node.name}</h3><p>${node.wddz || '地址不详'}</p>`,
                offset: new AMap.Pixel(0, -30)
            });

            currentMarker.on('click', () => {
                infoWindow.open(map, currentMarker.getPosition());
            });

            // 定位到网点（原逻辑保留）
            map.setCenter(new AMap.LngLat(lng, lat));
            map.setZoom(16);

        } catch (error) {
            console.error('绘制网点标记失败:', error);
        }
    }

    // ========== 网点搜索功能（完整恢复） ==========
    // 绑定搜索事件
    function bindSearchEvents() {
        // 搜索按钮点击事件
        document.getElementById('searchBtn').addEventListener('click', performSearch);

        // 输入框回车事件
        document.getElementById('keywordInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                performSearch();
            }
        });

        // 范围选择事件
        const radiusOptions = document.querySelectorAll('.radius-option');
        radiusOptions.forEach(option => {
            option.addEventListener('click', function() {
                radiusOptions.forEach(opt => opt.classList.remove('active'));
                this.classList.add('active');
                currentRadius = parseInt(this.getAttribute('data-radius'));
            });
        });

        // 分类标签点击事件
        const categoryTags = document.querySelectorAll('.category-tag[data-category]');
        categoryTags.forEach(tag => {
            tag.addEventListener('click', function() {
                const category = this.getAttribute('data-category');
                document.getElementById('keywordInput').value = category;
                performSearch();
            });
        });
    }

    // 执行搜索操作
    function performSearch() {
        if (!mapLoaded || !placeSearch) {
            alert("地图或搜索功能尚未加载完成");
            return;
        }

        if (!currentLngLat) {
            alert("未获取到网点位置信息");
            return;
        }

        const keyword = document.getElementById('keywordInput').value.trim();
        if (!keyword) {
            alert("请输入搜索关键词");
            return;
        }

        console.log('[搜索] 开始搜索:', keyword, '范围:', currentRadius, '米');

        // 显示搜索状态
        document.getElementById('searchStatus').style.display = 'block';

        // 清除之前的搜索结果
        clearSearchResults();

        // 执行周边搜索
        placeSearch.searchNearBy(keyword, currentLngLat, currentRadius, (status, result) => {
            document.getElementById('searchStatus').style.display = 'none';

            console.log('[搜索] 搜索完成，状态:', status, '结果:', result);

            if (status === "complete" && result.info === "OK") {
                const pois = result.poiList.pois;
                displaySearchResults(pois);
                markSearchResults(pois);
            } else {
                alert(`搜索失败: ${result?.info || '未知错误'}`);
            }
        });
    }

    // 显示搜索结果
    function displaySearchResults(pois) {
        const resultPanel = document.getElementById('searchResultPanel');
        const resultCount = document.getElementById('resultCount');
        const resultsList = document.getElementById('resultsList');

        resultCount.textContent = `(${pois.length})`;
        resultsList.innerHTML = '';

        if (pois.length === 0) {
            resultsList.innerHTML = '<p style="text-align:center;padding:20px 0;">未找到相关结果</p>';
            resultPanel.style.display = 'block';
            return;
        }

        // 添加结果项
        pois.forEach((poi, index) => {
            const resultItem = document.createElement('div');
            resultItem.className = 'result-item';
            resultItem.innerHTML = `
                <div class="result-title">${poi.name}</div>
                <div class="result-address">${poi.address || '地址未知'}</div>
            `;

            // 点击结果项定位
            resultItem.addEventListener('click', () => {
                const position = [poi.location.lng, poi.location.lat];
                map.setCenter(position);
                map.setZoom(17);

                // 触发标记点击
                if (currentSearchMarkers[index]) {
                    currentSearchMarkers[index].fire('click');
                }
            });

            resultsList.appendChild(resultItem);
        });

        resultPanel.style.display = 'block';
    }

    // 在地图上标记搜索结果
    function markSearchResults(pois) {
        const searchIcon = new AMap.Icon({
            size: new AMap.Size(28, 28),
            image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
            imageSize: new AMap.Size(28, 28)
        });

        pois.forEach(poi => {
            const marker = new AMap.Marker({
                position: [poi.location.lng, poi.location.lat],
                title: poi.name,
                icon: searchIcon,
                anchor: 'bottom-center',
                zIndex: 15
            });

            marker.setMap(map);
            currentSearchMarkers.push(marker);

            // 信息窗口
            const infoWindow = new AMap.InfoWindow({
                content: `
                        <h3 style="margin:10px 0">${poi.name}</h3>
                        <p style="margin:5px 0">地址：${poi.address || '未知'}</p>
                        ${poi.tel ? `<p style="margin:5px 0">电话：${poi.tel}</p>` : ''}
                    `,
                offset: new AMap.Pixel(0, -30)
            });

            marker.on('click', function() {
                infoWindow.open(map, marker.getPosition());
            });
        });

        // 绘制搜索范围圆
        const circle = new AMap.Circle({
            center: currentLngLat,
            radius: currentRadius,
            strokeColor: "#0066CC",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#0066CC",
            fillOpacity: 0.15,
            zIndex: 5,
            clickable: false,
            bubble: true
        });
        circle.setMap(map);
        currentSearchMarkers.push(circle);

        // 调整地图视野
        if (pois.length > 0) {
            const positions = pois.map(poi => [poi.location.lng, poi.location.lat]);
            positions.push(currentLngLat);
            const bounds = new AMap.Bounds(positions);
            map.setBounds(bounds, false, [50, 50, 50, 50]);
        }
    }

    // ========== 通用方法 ==========
    // 清除地图元素
    function clearMapElements(clearBoundary = true) {
        console.log('[清除地图元素] 清除边界:', clearBoundary);

        // 清除网点标记和关联的标签
        if (currentMarker) {
            if (currentMarker.label) {
                map.remove(currentMarker.label); // 清除标签
            }
            map.remove(currentMarker);
            currentMarker = null;
        }
        if (currentOutletLabel) { // 新增：清除网点名称标签
            map.remove(currentOutletLabel);
            currentOutletLabel = null;
        }

        // 清除区域边界（仅当clearBoundary为true时）
        if (clearBoundary) {
            if (districtPolygon) {
                if (Array.isArray(districtPolygon)) {
                    map.remove(districtPolygon);
                } else {
                    map.remove(districtPolygon);
                }
                districtPolygon = null;
            }
            if (districtLabel) {
                map.remove(districtLabel);
                districtLabel = null;
            }
            boundaryData = null;
        }

        // 清除勾选标记（无论是否清除边界都执行）
        Object.keys(checkedOutletMarkers).forEach(nodeId => {
            removeCheckedOutletMarker(nodeId);
        });

        // 清除搜索结果
        clearSearchResults();
    }

    // 清除搜索结果
    function clearSearchResults() {
        if (currentSearchMarkers.length > 0) {
            map.remove(currentSearchMarkers);
            currentSearchMarkers = [];
        }
        const resultPanel = document.getElementById('searchResultPanel');
        if (resultPanel) {
            resultPanel.style.display = 'none';
        }
    }

    // 地图错误处理
    function showMapError(msg) {
        console.error('[地图错误]', msg);
        document.querySelector('.map-loading').style.display = 'none';
        const errorEl = document.querySelector('.map-error');
        errorEl.style.display = 'flex';
        document.getElementById('errorMessage').textContent = msg;
    }

    // 重试加载地图
    function retryLoadMap() {
        mapLoaded = false;
        initMap();
    }

    // ========== 自定义标记功能（核心解决方案） ==========
    // 切换添加标记模式
    function toggleAddMarkerMode() {
        isAddMarkerMode = !isAddMarkerMode;
        const btn = document.getElementById('toggleAddMarkerBtn');

        if (isAddMarkerMode) {
            btn.textContent = '关闭添加标记';
            btn.className = 'layui-btn layui-btn-sm layui-btn-danger';

            // 开启添加标记模式时，设置鼠标为十字
            map.setDefaultCursor('crosshair');

            // 绑定地图点击事件（移除捕获模式）
            map.on('click', handleMapClickForMarker);

            console.log('[标记模式] 已开启添加标记模式，绑定了地图事件');
            layer.msg('已开启添加标记模式，点击地图任意位置（包括边界内）添加标记', {icon: 1});
        } else {
            btn.textContent = '开启添加标记';
            btn.className = 'layui-btn layui-btn-sm layui-btn-normal';

            // 关闭添加标记模式时，恢复默认鼠标样式
            map.setDefaultCursor('default');

            // 解绑地图点击事件
            map.off('click', handleMapClickForMarker);

            // 移除临时标记
            if (tempMarker) {
                map.remove(tempMarker);
                tempMarker = null;
            }

            // 重置确认状态
            isConfirming = false;

            console.log('[标记模式] 已关闭添加标记模式，解绑了地图事件');
            layer.msg('已关闭添加标记模式', {icon: 2});
        }
    }

    // 处理地图点击添加标记（主处理函数）
    function handleMapClickForMarker(e) {
        // 如果正在确认弹窗中，忽略新的点击
        if (isConfirming || !isAddMarkerMode) {
            console.log('[标记点击] 忽略点击：isConfirming=', isConfirming, 'isAddMarkerMode=', isAddMarkerMode);
            return;
        }

        console.log('[标记点击] 地图事件触发，isAddMarkerMode:', isAddMarkerMode, '事件类型:', e.type);

        try {
            // 获取坐标（兼容不同事件类型）
            const lnglat = e.lnglat || e.originalEvent && e.originalEvent.lnglat ||
                (e.pixel && map.containerToLngLat(e.pixel)) ||
                AMap.LngLat.convert(e);

            if (!lnglat) {
                console.error('[标记点击] 无法获取坐标:', e);
                return;
            }

            const lng = lnglat.getLng().toFixed(6); // 保留6位小数
            const lat = lnglat.getLat().toFixed(6);

            console.log('[标记点击] 获取到坐标:', lng, lat);

            // 移除之前的临时标记
            if (tempMarker) {
                map.remove(tempMarker);
            }

            // 创建临时预览标记（紫色，区分其他标记）
            tempMarker = new AMap.Marker({
                position: lnglat,
                icon: new AMap.Icon({
                    size: new AMap.Size(32, 32),
                    image: '/zhdt/image/zhdt/bjdz.png',
                    imageSize: new AMap.Size(32, 32)
                }),
                anchor: 'bottom-center',
                zIndex: 9999, // 最高层级确保可见
                clickable: false, // 不拦截事件
                bubble: true     // 允许事件冒泡
            });
            tempMarker.setMap(map);
            console.log('[标记点击] 创建临时标记');

            // 设置正在确认状态
            isConfirming = true;

            // 弹出确认框（只添加名称输入框）
            layer.confirm(
                `定位到坐标：<br><strong>经度：${lng}</strong><br><strong>纬度：${lat}</strong><br><br>
                 <label>标记名称：</label><br>
                 <input type="text" id="markerNameInput" class="marker-name-input" placeholder="请输入标记名称" value="自定义标记">`,
                {
                    title: '确认保存标记',
                    btn: ['保存', '取消'],
                    shade: 0.3,
                    shadeClose: false, // 点击遮罩不关闭
                    offset: 'auto',     // 自动定位
                    zIndex: 99999,      // 确保弹窗在最上层
                    success: function(layero, index) {
                        // 确保弹窗在最上层
                        layero.css('z-index', 99999);
                        console.log('[标记点击] 确认弹窗已显示');
                    },
                    end: function() {
                        // 无论关闭原因，重置确认状态
                        isConfirming = false;
                        console.log('[标记点击] 弹窗已关闭，重置确认状态');
                    }
                },
                function(index) {
                    // 获取输入的名称
                    const markerName = document.getElementById('markerNameInput').value.trim() || '自定义标记';
                    // 保存标记
                    saveCustomMarker(lnglat, lng, lat, markerName);
                    layer.close(index);
                    layer.msg(`标记已保存：${markerName}`, {icon: 1});
                    console.log('[标记点击] 用户确认保存标记：', markerName);
                },
                function(index) {
                    // 取消则移除临时标记
                    if (tempMarker) {
                        map.remove(tempMarker);
                        tempMarker = null;
                        console.log('[标记点击] 用户取消，移除临时标记');
                    }
                    layer.close(index);
                }
            );

        } catch (error) {
            console.error('[标记点击] 处理错误:', error);
            // 重置确认状态
            isConfirming = false;
            layer.msg('处理点击事件时出错：' + error.message, {icon: 2});
        }
    }

    // 保存自定义标记
    function saveCustomMarker(lnglat, lng, lat, markerName) {
        // 创建永久标记
        const marker = new AMap.Marker({
            position: lnglat,
            icon: new AMap.Icon({
                size: new AMap.Size(32, 32),
                image: '/zhdt/image/zhdt/bjdz.png',
                imageSize: new AMap.Size(32, 32)
            }),
            anchor: 'bottom-center',
            zIndex: 9999,
            title: markerName,
            clickable: true // 允许点击查看详情
        });
        marker.setMap(map);

        // 添加信息窗口
        const infoWindow = new AMap.InfoWindow({
            content: `
                <div style="padding: 10px;">
                    <h4>${markerName}</h4>
                    <p>经度：${lng}</p>
                    <p>纬度：${lat}</p>
                    <p>创建时间：${new Date().toLocaleString()}</p>
                </div>
            `,
            offset: new AMap.Pixel(0, -30)
        });

        marker.on('click', function() {
            infoWindow.open(map, marker.getPosition());
        });

        // 存储标记信息
        customMarkers.push({
            marker: marker,
            name: markerName,
            lng: lng,
            lat: lat,
            createTime: new Date().toLocaleString(),
            infoWindow: infoWindow
        });

        // 移除临时标记
        if (tempMarker) {
            map.remove(tempMarker);
            tempMarker = null;
        }

        // 重置确认状态
        isConfirming = false;

        // 控制台输出坐标（你可以替换为后端保存逻辑）
        console.log('[标记保存] 保存的标记：', {name: markerName, lng, lat});

        // 更新右侧面板的标记列表
        updateCustomMarkersList();
    }

    // 获取自定义标记列表HTML（添加新按钮）
    function getCustomMarkersHtml() {
        return `
            <div class="detail-card">
                <h3 class="detail-title" onclick="toggleCard(this)">自定义标记列表
                    <span class="toggle-btn">-</span>
                </h3>
                <div class="detail-content">
                    ${customMarkers.length === 0 ?
            '<p style="text-align: center; color: #999; margin: 10px 0;">暂无自定义标记</p>' :
            customMarkers.map((item, index) => `
                            <div class="custom-marker-item">
                                <div style="flex: 1;">
                                    <strong>${item.name}</strong>
                                    <br>
                                    <small style="color: #666;">坐标：${item.lng}, ${item.lat}</small>
                                    <br>
                                    <small style="color: #999;">创建时间：${item.createTime}</small>
                                </div>
                                <div class="marker-actions">
                                    <button class="layui-btn layui-btn-xs layui-btn-normal" onclick="locateCustomMarker(${index})">
                                        定位
                                    </button>
                                    <button class="layui-btn layui-btn-xs layui-btn-primary" onclick="saveAsOutletSurroundingMarker(${index})">
                                        保存为网点周边标记
                                    </button>
                                    <button class="layui-btn layui-btn-xs layui-btn-primary" onclick="saveAsNewOutlet(${index})">
                                        保存为新网点
                                    </button>
                                    <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="removeCustomMarker(${index})">
                                        删除
                                    </button>
                                </div>
                            </div>
                        `).join('')}
                </div>
            </div>
        `;
    }

    // 更新自定义标记列表显示
    function updateCustomMarkersList() {
        const detailEl = document.getElementById('detailContent');

        // 如果当前是无选择状态，直接显示标记列表
        if (detailEl.querySelector('.no-selection')) {
            detailEl.innerHTML = getCustomMarkersHtml();
        } else {
            // 移除已存在的自定义标记列表，重新添加
            const existingMarkerLists = detailEl.querySelectorAll('.detail-card');
            let lastCard = existingMarkerLists[existingMarkerLists.length - 1];

            if (lastCard && lastCard.querySelector('.custom-marker-item')) {
                lastCard.remove();
            }

            detailEl.insertAdjacentHTML('beforeend', getCustomMarkersHtml());
        }
    }

    // 定位到自定义标记
    function locateCustomMarker(index) {
        const item = customMarkers[index];
        if (item) {
            map.setCenter([item.lng, item.lat]);
            map.setZoom(17);
            item.infoWindow.open(map, item.marker.getPosition());
            //layer.msg(`已定位到标记：${item.name}`, {icon: 1});
        }
    }

    // 删除自定义标记
    function removeCustomMarker(index) {
        const item = customMarkers[index];
        if (item) {
            // 从地图移除标记和信息窗口
            map.remove(item.marker);
            if (item.infoWindow) {
                item.infoWindow.close();
            }
            // 从数组移除
            customMarkers.splice(index, 1);
            layer.msg(`已删除标记：${item.name}`, {icon: 2});
            console.log('[标记删除] 删除索引', index, '的标记：', item.name);
            // 更新列表
            updateCustomMarkersList();
        }
    }

    // 保存为网点周边标记（空方法，仅alert）
    function saveAsOutletSurroundingMarker(index) {
        const item = customMarkers[index];
        if (item) {
            // 拼接参数，对名称进行编码防止特殊字符问题
            const contentUrl = `/zhdt/zhdt/wdzb/add_bj?dqwd=${currentNode.id}&lx=0&name=${encodeURIComponent(item.name)}&jd=${item.lng}&wd=${item.lat}`;

            layerindex = layer.open({
                type: 2,
                title: "新增标记",
                area: ["680px", "580px"],
                content: contentUrl, // 使用拼接后的URL
                fixed: true,
                maxmin: true,
                shadeClose: false
            });
        }
    }

    // 保存为新网点（空方法，仅alert）
    function saveAsNewOutlet(index) {
        const item = customMarkers[index];
        if (item) {
            // 拼接参数，对名称进行编码防止特殊字符问题
            const contentUrl = `/zhdt/zhdt/wdzb/add_jg?lx=0&name=${encodeURIComponent(item.name)}&jd=${item.lng}&wd=${item.lat}`;

            layerindex = layer.open({
                type: 2,
                title: "新增网点",
                area: ["680px", "580px"],
                content: contentUrl, // 使用拼接后的URL
                fixed: true,
                maxmin: true,
                shadeClose: false
            });
        }
    }

    // DOM级别点击事件处理（备用方案，确保绝对能捕获点击）
    function handleDomMapClick(e) {
        if (!isAddMarkerMode) return;

        console.log('[DOM标记点击] DOM事件触发，备用方案', e);

        try {
            // 获取点击位置相对于地图容器的坐标
            const rect = e.target.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            // 转换为地图坐标
            const lnglat = map.containerToLngLat([x, y]);
            if (!lnglat) return;

            const lng = lnglat.getLng().toFixed(6);
            const lat = lnglat.getLat().toFixed(6);

            console.log('[DOM标记点击] 通过DOM事件获取坐标:', lng, lat);

            // 如果主处理函数没捕获到，这里处理
            if (!tempMarker) {
                handleMapClickForMarker({
                    lnglat: lnglat,
                    preventDefault: () => {},
                    stopPropagation: () => {}
                });
            }
        } catch (error) {
            console.error('[DOM标记点击] 错误:', error);
        }
    }

    // 处理节点勾选/取消勾选（含递归处理子节点）
    function handleNodeCheck(treeNode) {
        if (!mapLoaded) return;

        // 递归处理节点及其所有子孙节点（强制按当前父节点状态处理）
        function processNodes(node, parentChecked) {
            if (node.sfqu === "1") return; // 跳过区域节点

            // 父节点取消时，强制子节点也取消
            const finalChecked = parentChecked !== undefined ? parentChecked : node.checked;

            if (finalChecked) {
                addCheckedOutletMarker(node);
            } else {
                removeCheckedOutletMarker(node.id); // 强制移除标记
            }

            // 递归处理子节点，传递父节点状态
            if (node.children && node.children.length > 0) {
                node.children.forEach(child => processNodes(child, finalChecked));
            }
        }

        // 处理当前节点及其子孙节点（传递当前节点的勾选状态）
        processNodes(treeNode, treeNode.checked);

        // 最终兜底检查：确保所有未勾选的非区域节点都移除标记
        const allNodes = zTree.transformToArray(zTree.getNodes());
        allNodes.forEach(node => {
            if (node.sfqu !== "1") {
                if (node.checked && !checkedOutletMarkers[node.id]) {
                    addCheckedOutletMarker(node);
                } else if (!node.checked && checkedOutletMarkers[node.id]) {
                    removeCheckedOutletMarker(node.id);
                }
            }
        });
    }

    // 添加勾选网点的地图标记（含名称标签）
    function addCheckedOutletMarker(node) {
        if (!node.wdjd || !node.wdwd) return; // 无坐标跳过

        const lng = parseFloat(node.wdjd);
        const lat = parseFloat(node.wdwd);
        if (isNaN(lng) || isNaN(lat)) return;

        // 避免重复添加
        if (checkedOutletMarkers[node.id]) return;

        // 1. 创建勾选节点的标记（保持蓝色标记样式）
        const marker = new AMap.Marker({
            position: new AMap.LngLat(lng, lat),
            title: node.name,
            icon: new AMap.Icon({
                size: new AMap.Size(28, 28), // 勾选标记稍小，区分点击的网点标记
                image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-blue.png',
                imageSize: new AMap.Size(28, 28)
            }),
            anchor: 'bottom-center',
            zIndex: 18,
            clickable: true
        });

        // 2. 创建标签（和自定义标记/点击网点的标签样式完全一致）
        const label = new AMap.Text({
            text: node.name,
            position: new AMap.LngLat(lng, lat),
            offset: new AMap.Pixel(-(node.name.length * 4), 25), // 水平居中
            // 统一样式：和自定义标记标签完全相同
            style: {
                backgroundColor: 'rgba(0, 102, 204, 0.8)', // 统一蓝色背景
                color: 'white',
                padding: '3px 8px',
                borderRadius: '3px',
                fontSize: '12px',
                whiteSpace: 'nowrap',
                pointerEvents: 'none'
            },
            zIndex: 19,
            clickable: false,
            bubble: true
        });

        // 3. 信息窗口（保持简洁）
        const infoWindow = new AMap.InfoWindow({
            content: `<h3>${node.name}</h3><p>${node.wddz || '地址不详'}</p>`,
            offset: new AMap.Pixel(0, -30)
        });

        // 绑定点击事件
        marker.on('click', () => {
            infoWindow.open(map, marker.getPosition());
        });

        // 添加到地图
        marker.setMap(map);
        label.setMap(map);

        // 存储标记和标签（关联起来方便清理）
        checkedOutletMarkers[node.id] = {
            marker: marker,
            label: label,
            infoWindow: infoWindow
        };
    }

    // 移除勾选网点的地图标记
    function removeCheckedOutletMarker(nodeId) {
        const markerInfo = checkedOutletMarkers[nodeId];
        if (markerInfo) {
            map.remove(markerInfo.marker);
            map.remove(markerInfo.label); // 清除统一样式的标签
            markerInfo.infoWindow.close();
            delete checkedOutletMarkers[nodeId];
        }
    }

    function on_done(){
        layer.closeAll();
    }
</script>
</body>
</html>